<template>
	<view class="container">
		<view class="header">
			<image class="avatar" :src="platform.logo" mode="widthFix"></image>
			<view class="text">{{platform.name}}</view>
		</view>
		<view class="body">
			<view class="form">
				<view class="item">
					<view class="title">手机号</view>
					<view class="input">
						<u-input v-model="mobile" type="number" maxlength="11" placeholder="请输入手机号"></u-input>
					</view>
				</view>
				<view class="item">
					<view class="title">验证码</view>
					<view class="input">
						<u-input v-model="captcha" type="number" maxlength="4" placeholder="请输入验证码"></u-input>
						<view @click="getCode" class="code-btn">{{tips}}</view>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
						<u-toast ref="uToast"></u-toast>
					</view>
				</view>
				<!-- <view class="item">
					<view class="title">密码</view>
					<view class="input"><u-input v-model="password" type="password" placeholder="请输入密码"></u-input></view>
				</view> -->
			</view>
			<view class="n-btn-primary" @click="login">登录</view>
			<!-- <view class="login-text">
				没有账号？
				<navigator url="../register/register">去注册</navigator>
			</view> -->
			<view class="agreement">
				<label>
					<checkbox style="transform: scale(.6);" :value="isCheck" :checked="isCheck" />
					<view class="flex">
						阅读并同意
						<view class="primary" @click.stop="$tools.to('../agreement/agreement?key=yhxy')">《用户协议》</view>
						<view class="primary" @click.stop="$tools.to('../agreement/agreement?key=ysxy')">《隐私协议》</view>
						<!-- 						<navigator @click.stop url="../agreement/agreement?key=user_policy">《用户协议》</navigator>
						<navigator url="../agreement/agreement?key=privacy_policy">《隐私协议》</navigator> -->
					</view>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex';
	import {
		platform
	} from '@/config/index.js'
	export default {
		data() {
			return {
				platform,
				getUser: false, //手用户信息获取状态
				getPhone: false, //手机号获取状态
				userInfo: '', //用户信息
				openid: '', //openid
				mobile: '', //手机号
				captcha: '', //验证码
				password: '',
				student_name: '',
				student_grade: '',
				student_course: '',
				pid: '', //邀请码
				isCheck: '1',
				gradeShow: false,
				gradeName: '',
				courseShow: false,
				courseName: false,
				gradeList: [],
				courseList: [],
				seconds: 60,
				tips: ''
			};
		},
		onShow() {
			if (uni.getStorageSync('pid')) {
				this.pid = uni.getStorageSync('pid');
			}
		},
		onLoad() {
			console.log(platform)
		},
		methods: {
			...mapMutations(['UPDATE_USERINFO']),
			...mapActions(['getUserInfo']),
			// 登录
			login() {
				if (this.isCheck == 0) {
					this.$tools.toast('请阅读并同意协议')
					return
				}
				this.$api.login({
					mobile: this.mobile,
					captcha: this.captcha
				}).then(res => {
					this.$tools.toast(res.msg)
					if (res.code == 1) {
						uni.setStorageSync('userInfo', res.data.userinfo)
						uni.setStorageSync('token', res.data.userinfo.token)
						this.UPDATE_USERINFO(res.data.userinfo)
						this.getUserInfo()
						setTimeout(() => {
							uni.switchTab({
								url: '../index/index'
							})
						}, 800)
					}
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!this.$tools.verifyTelPhone(this.mobile)) {
					return
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.getMsgCode({
						mobile: this.mobile,
						event: 'mobilelogin'
					}).then(res => {
						if (res.code == 1) {
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							this.$tools.toast(res.msg)
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {},
			start() {},
			async getuserinfo() {
				// 获取用户信息
				// let userInfo = await this.$tools.mpGetUserProfile();
				let code = await this.$tools.mpGetCode();
				console.log(code);
				this.$api
					.login({
						code: code.code,
						pid: this.pid
					})
					.then(res => {
						if (res.code == 1) {
							this.openid = res.data.openid;
							this.userInfo = userInfo.userInfo;
							uni.setStorageSync('token', res.data.userinfo.token);
							this.getUser = true;
						}
					});
			},
			// getPhoneNumber(e) {
			// 	uni.login({
			// 		provider: 'weixin',
			// 		success: loginInfo => {
			// 			console.log(loginInfo, 'loginInfo');
			// 			this.$api
			// 				.getWechatMobile({
			// 					code: loginInfo.code,
			// 					iv: e.detail.iv,
			// 					encryptedData: e.detail.encryptedData
			// 				})
			// 				.then(res => {
			// 					console.log(res);
			// 					if (res.code == 1) {
			// 						this.mobile = res.data.phoneNumber;
			// 						this.getPhone = true;
			// 						this.login();
			// 					} else {
			// 						uni.showToast({
			// 							title: '获取失败，请重试',
			// 							icon: 'none'
			// 						});
			// 					}
			// 				});
			// 		}
			// 	});
			// },
			// login() {
			// 	console.log('登录');
			// 	this.$api
			// 		.updateUserInfo({
			// 			openid: this.openid,
			// 			username: this.userInfo.nickName,
			// 			avatar: this.userInfo.avatarUrl,
			// 			area: '',
			// 			birthday: ''
			// 			// pid:this.pid
			// 		})
			// 		.then(res => {
			// 			if (res.code == 1) {
			// 				this.$tools.toast('登录成功');
			// 				this.getUserInfo();
			// 				setTimeout(() => {
			// 					uni.reLaunch({
			// 						url: '../index/index'
			// 					});
			// 				}, 1000);
			// 			}
			// 		});
			// },
			goAgreement() {
				uni.navigateTo({
					url: './userAgreement/userAgreement'
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.header {
		background-size: cover;
		padding: 150upx 0 90upx;
		text-align: center;

		.avatar {
			width: 180upx;
		}

		.text {
			font-size: 42upx;
			color: $color-primary;
			letter-spacing: 10upx;
			margin-top: 30upx;
			line-height: 1;
		}
	}

	.body {
		background: #ffffff;
		border-radius: 40upx 40upx 0px 0px;
		margin-top: -40upx;
		padding: 50upx 45upx;

		.title-1 {
			font-size: 42upx;
			font-weight: bold;
			color: #333333;
			letter-spacing: 20upx;
			text-align: center;
		}

		.form {
			.item {
				margin-top: 60upx;

				.title {
					font-size: 30upx;
					font-weight: 500;
					color: #333333;
				}

				.input {
					margin-top: 10upx;
					@include flex;
					border-bottom: 2upx solid #efefef;
					flex: 1;

					.code-btn {
						font-size: 30upx;
						color: #2094e9;
						padding-left: 30upx;
						line-height: 32upx;
						height: 32upx;
						border-left: 2upx solid #2094e9;
					}

					/deep/ u-input {
						flex: 1;
					}
				}
			}
		}

		.select {
			.item {
				margin-top: 30upx;
				@include flex;

				.title {
					font-size: 30upx;
					color: #666666;
				}

				.option {
					flex: 1;
					font-size: 30upx;
					color: #999999;
					line-height: 72upx;
					background: #f7f7f7;
					border-radius: 36upx;
					padding: 0 40upx;
					margin-left: 50upx;
					@include flex-between;
				}
			}
		}

		.login-text {
			font-size: 30upx;
			color: #999999;
			margin-top: 30upx;
			line-height: 1;
			@include flex-end;

			navigator {
				color: #2094e9;
			}
		}

		.agreement {
			margin-top: 100upx;
			padding-bottom: 50upx;

			label {
				@include flex-center;
				font-size: 28upx;
				color: #999;

				navigator {
					color: #2094E9;
				}
			}
		}
	}

	.n-btn-primary {
		margin-top: 100upx;
	}
</style>
